import React from 'react';

import styles from './index.module.less';

/*
* @author JinHang
* @description 搜索框
* @date 2018/10/22 15:53
* @param {}
* @return {}
* */
export default class SearchBox extends React.Component {
  state = {
    showOptions: false,
  };

  onSearchSelectMouseEnter = () => {
    this.setState({
      showOptions: true,
    });
  };

  onSearchSelectMouseLeave = () => {
    this.setState({
      showOptions: false,
    });
  };

  render() {
    const { showOptions } = this.state;

    return (
      <div className={styles.searchBox + ' ' + styles.clearfix}>
        <div className={styles.searchSelectBox}>
          <ul
            className={styles.selectOption}
            style={{ overflow: showOptions ? 'unset' : 'hidden' }}
            onMouseEnter={this.onSearchSelectMouseEnter}
            onMouseLeave={this.onSearchSelectMouseLeave}
          >
            <li className={styles.first}>原料 ∨</li>
            <li>1</li>
            <li>2</li>
            <li className={styles.last}>3</li>
          </ul>
        </div>
        <input className={styles.searchInput} placeholder='请输入关键字' type='text' />
        <button className={styles.searchBtn}>搜索</button>
      </div>
    );
  }
}
